<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="text/javascript">
        function refresh() {
            document.getElementById('captcha_img').src = "/kaptcha?" + Math.random();
        }
    </script>
</head>
<body>
<form action="/hello" method="post">
    验证码: <input type="text" placeholder="请输入验证码" name="verifyCodeActual">
    <div class="item-input">
        <img id="captcha_img" alt="点击更换" title="点击更换"
             onclick="refresh()" src="/kaptcha"/>
    </div>
    <input type="submit" value="提交"/>
</form>

<hr>
<h3>下面是使用vue</h3>

<div id="app">

    {{hello}}
    <br>
    <input type="text" v-model="email">

    <img :src="imgUrl" v-on:click="getKaptcha">
    <!--    <form action="http://localhost:7150/hello">-->
    <!--        <input type="text" placeholder="请输入验证码" name="verifyCodeActual">-->
    <!--        <input type="submit" value="提交" />-->
    <!--    </form>-->

    <input type="text" name="verifyCodeActual" v-model="pass">
    <button v-on:click="sendSignPass">获取注册用邮箱验证码</button>
    <button v-on:click="sendGetPass">获取找回密码用验证码</button>

</div>


<script type="text/javascript">
    console.log(Vue)
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                hello: "hello VUE",
                imgUrl: "/kaptcha",
                pass: '2352352',
                email: "1141649562@qq.com"

            }
        },
        methods: {
            getKaptcha: function () {
                this.imgUrl = "/kaptcha?" + Math.random();
            },
            sendSignPass: function () {
                axios.post('/getSignInEmail/' + this.email + "/" + this.pass).then((response) => {
                    console.log(response.data)
                })
            },
            sendGetPass: function () {
                axios.post('/getPassBackEmail/' + this.email + "/" + this.pass).then((response) => {
                    console.log(response.data)
                })
            }

        }
    })
</script>

</body>
</html>
